<template>
  <div class="search-form">
    <el-form
      ref="formRef"
      :model="formData"
      :inline="inline"
      :label-width="labelWidth"
      @submit.prevent="handleSearch"
    >
      <div class="search-form-content">
        <slot></slot>
      </div>
      
      <div class="search-form-actions">
        <el-button type="primary" @click="handleSearch" :loading="loading">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
        <el-button v-if="showAdvanced" @click="toggleAdvanced">
          {{ advancedVisible ? '收起' : '展开' }}
          <el-icon>
            <ArrowUp v-if="advancedVisible" />
            <ArrowDown v-else />
          </el-icon>
        </el-button>
      </div>
    </el-form>
    
    <div class="search-form-advanced" v-if="showAdvanced && advancedVisible">
      <slot name="advanced"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, provide } from 'vue'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  },
  inline: {
    type: Boolean,
    default: true
  },
  labelWidth: {
    type: String,
    default: '80px'
  },
  loading: {
    type: Boolean,
    default: false
  },
  showAdvanced: {
    type: Boolean,
    default: false
  },
  defaultAdvancedVisible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'search', 'reset'])

const formRef = ref(null)
const advancedVisible = ref(props.defaultAdvancedVisible)

// 表单数据
const formData = reactive({ ...props.modelValue })

// 监听modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    Object.assign(formData, newVal)
  },
  { deep: true }
)

// 监听表单数据变化
watch(
  formData,
  (newVal) => {
    emit('update:modelValue', { ...newVal })
  },
  { deep: true }
)

// 处理搜索
const handleSearch = () => {
  emit('search', { ...formData })
}

// 处理重置
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  emit('reset')
}

// 切换高级搜索
const toggleAdvanced = () => {
  advancedVisible.value = !advancedVisible.value
}

// 暴露方法给父组件
defineExpose({
  getFormData: () => ({ ...formData }),
  resetForm: handleReset,
  submitForm: handleSearch,
  toggleAdvanced
})

// 提供表单数据给子组件
provide('searchFormData', formData)
</script>

<style lang="scss" scoped>
.search-form {
  background: var(--el-bg-color-overlay);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow-lighter);
  padding: 20px;
  margin-bottom: 20px;
  
  .el-form {
    margin: 0;
    
    .search-form-content {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      
      .el-form-item {
        margin-bottom: 0;
        margin-right: 0;
        flex: 1;
        min-width: 200px;
      }
    }
    
    .search-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 16px;
    }
  }
  
  .search-form-advanced {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--el-border-color-lighter);
    
    .el-form {
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
}

// 响应式布局
@media (max-width: 768px) {
  .search-form {
    .el-form {
      .search-form-content {
        .el-form-item {
          min-width: 100%;
        }
      }
      
      .search-form-actions {
        justify-content: center;
      }
    }
  }
}
</style>